<!--
  @Author cj
  @Date: 2021/01/26/ 9:07
-->
<template>
  <el-dialog title="编辑显示字段" :visible.sync="dialogVisible" width="584px" @close="close()">
    <div>
      <el-row>
        <el-col :span="22">
          <el-transfer
            v-model="outputListTemp"
            :data="dataList"
            :props="alias"
            filterable
            :titles="['隐藏字段', '显示字段']"
            target-order="push"
            @right-check-change="rightCheck"
            @change="transferChange"
            :right-default-checked="tempSelectionKeys"
          ></el-transfer>
        </el-col>
        <!-- 上移/下移 -->
        <el-col :span="2" style="margin-top: 95px;">
          <div style="margin-bottom: 10px;">
            <el-button icon="el-icon-arrow-up" circle :disabled="upDownDisable" @click="upData"></el-button>
          </div>
          <div>
            <el-button icon="el-icon-arrow-down" circle :disabled="upDownDisable" @click="downData"></el-button>
          </div>
        </el-col>
      </el-row>
    </div>

    <span slot="footer" class="dialog-footer">
      <el-button @click="close()">取 消</el-button>
      <el-button type="primary" @click="confirm()">确 定</el-button>
    </span>

  </el-dialog>
</template>

<script>
  import {deepClone} from "../../../util/util";

  export default {
    name: "columnTransfer",
    // dataList-全部字段数据  choseDataList-显示字段数据
    props:['visible', 'dataList', 'choseDataList'],
    data() {
      return {
        dialogVisible: false,
        alias: { key: 'prop',label: 'label' },
        upDownDisable: true, // 是否可点击上下移
        tempSelectionKeys: [], // 显示字段复选框-当前选中的数据
        outputListTemp: [], // 显示字段list（key值）
      }
    },
    watch: {
      visible(val){
        this.dialogVisible = val
        if(val){
          this.tempSelectionKeys = []
          this.upDownDisable = true
          // 控制-序号/复选框/单选框-不可移动穿梭
          for (let i = 0, len = this.dataList.length; i < len; i++) {
            let item = this.dataList[i]
            if(item.type==='index' || item.type==='indexCheck' || item.type==='indexRadio' || item.fixed) {
              item.disabled = true
            } else {
              item.disabled = false
            }
          }
          // 回显-右侧选中的值
          this.outputListTemp = [];
          for (let i = 0, len = this.choseDataList.length; i < len; i++) {
            let item = this.choseDataList[i]
            if(item.type==='index'||item.type==='indexCheck'||item.type==='indexRadio'){
              this.outputListTemp.push(item.type)
            } else {
              this.outputListTemp.push(item.prop)
            }
          }
        }
      },
    },
    mounted() {

    },
    methods: {
      // 右侧列表元素变化时
      transferChange(val,direction){
        if(direction==='left'){
          this.tempSelectionKeys = []
          this.upDownDisable = true;
        }
      },
      // 选择
      rightCheck(selectionKeys, changeKeys){
        this.tempSelectionKeys = selectionKeys;
        if(selectionKeys.length > 0){
          this.upDownDisable = false;
        }else{
          this.upDownDisable = true;
        }
      },
      // 上移
      upData(){
        if(this.tempSelectionKeys.length > 1){
          this.$message({
            type: 'warning',
            message: '仅支持单选调顺序'
          });
          return ;
        }
        let indexNum = 0;
        for(let i=0; i<this.tempSelectionKeys.length; i++){
          indexNum = this.outputListTemp.indexOf(this.tempSelectionKeys[i])
          if(indexNum > 0){
            this.outputListTemp.splice(indexNum - 1, 0, this.tempSelectionKeys[i]);
            this.outputListTemp.splice(indexNum + 1, 1);
          }
        }
      },
      // 下移
      downData(){
        if(this.tempSelectionKeys.length > 1){
          this.$message({
            type: 'warning',
            message: '仅支持单选调顺序'
          });
          return ;
        }
        let indexNum = 0;
        for(let i=0; i<this.tempSelectionKeys.length; i++){
          indexNum = this.outputListTemp.indexOf(this.tempSelectionKeys[i]);
          if(indexNum > -1 && indexNum != this.outputListTemp.length - 1){
            this.outputListTemp.splice(indexNum + 2, 0, this.tempSelectionKeys[i]);
            this.outputListTemp.splice(indexNum, 1);
          }
        }
      },
      // 确定
      confirm(){
        let checkData = []
        for (let j = 0; j < this.outputListTemp.length; j++) {
          let checkKey = this.outputListTemp[j]
          for (let i = 0; i < this.dataList.length; i++) {
            let item = this.dataList[i]
            if(
              (checkKey==='index'||checkKey==='indexCheck'||checkKey==='indexRadio') ||
              (checkKey === item.prop)
            ){
              checkData.push(item)
              break
            }
          }
        }
        this.$emit('close', checkData)
        this.dialogVisible = false
      },
      // 关闭
      close(){
        this.dialogVisible = false
        this.$emit('close')
      }

    }

  }
</script>

<style lang="scss" scoped>

</style>
